import React, { memo } from 'react'

import ThirtyApp from './pages/ThirtyApp'
import ChartComponent from './pages/chart/index'
import TableComponent from './pages/Table'
import HealthComponent from './pages/health'
import PersonnelComponent from './pages/health02'

import { Home } from './style'

const App = memo(() => {
  return (
    <Home>
      <div className="title">
        <span className="titleContent">煤制乙二醇APP测试验证平台</span>
      </div>
      <div className="content">
        <div className="infromation">
          <div className="basicInfo">
            <div className="health">
              <div className="box1">
                <i className="box1-topleft"></i>
                <i className="box1-topright"></i>
                <i className="box1-bottomleft"></i>
                <i className="box1-bottomright"></i>
                <div className="box1-content">
                  <HealthComponent></HealthComponent>
                </div>
              </div>
              <div className="box2">
                <i className="box1-topleft"></i>
                <i className="box1-topright"></i>
                <i className="box1-bottomleft"></i>
                <i className="box1-bottomright"></i>
                <div className="box2-content">
                  <PersonnelComponent></PersonnelComponent>
                </div>
              </div>
            </div>
            <div className="flowChart">
              <iframe src="http://202.119.249.152:8080/#/runtime-fullscreen/runtime-fullscreen/Page_38c3736d90f1485caab22655e988f496" frameborder="0"></iframe>
              {/* <iframe src="https://www.supos.com/" frameborder="0"></iframe> */}
            </div>
          </div>
          <div className="TableAndChart">
            <div className="table1">
              <div className="tableName">
                调度优化报表
              </div>
              <div className="maincontent">
                <TableComponent></TableComponent>
              </div>
            </div>
            <div className="chart">
              <ChartComponent></ChartComponent>
            </div>
          </div>
        </div>
        <div className="thirstyApp">
          <ThirtyApp></ThirtyApp>
        </div>
      </div>
    </Home>
  )
})

export default App